<template>
    <el-card>
        <el-table :data="users.list">
            <el-table-column label="昵称">
                <template scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="密码">
                <template scope="scope">
                    <el-input v-if="scope.row.status" size="small" v-model="temp.password" placeholder="请输入内容"
                    ></el-input>
                    <span v-else>{{scope.row.password}}</span>
                </template>
            </el-table-column>
            <el-table-column label="性别">
                <template scope="scope">
                    <el-input v-if="scope.row.status" size="small" v-model="temp.gender" placeholder="请输入内容"
                    ></el-input>
                    <span v-else>{{scope.row.gender}}</span>
                </template>
            </el-table-column>
            <el-table-column label="签名">
                <template scope="scope">
                    <el-input v-if="scope.row.status" size="small" v-model="temp.signature" placeholder="请输入内容"
                    ></el-input>

                    <span v-else>{{scope.row.signature}}</span>
                </template>
            </el-table-column>
            <el-table-column label="uuid">
                <template scope="scope">
                    <span>{{scope.row.uuid}}</span>
                </template>
            </el-table-column>
            <el-table-column>
                <template scope="scope">
                    <el-select :disabled="!scope.row.status" v-model="scope.row.roles" multiple @change="roleChange"
                               placeholder="请选择">
                        <el-option
                                v-for="item in AllRoles"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status" @click="confirmEdit(scope.$index,scope.row)" type="text"
                               size="small">确认
                    </el-button>
                    <el-button v-else type="text" size="small" @click="novelDelete(scope.row)">删除</el-button>
                    <el-button v-if="scope.row.status" type="text" size="small"
                               @click="cancelEdit(scope.$index, scope.row)">取消编辑
                    </el-button>
                    <el-button type="text" size="small" @click="edit(scope.$index, scope.row)" v-else>编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="users.pages"
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange">
        </el-pagination>
    </el-card>
</template>

<script>
    export default {
        name: "UserManager",
        data() {
            return {
                users: [],
                temp: [],
                currentPage: 1,
                dialogTableVisible: false,
                dialogFormVisible: false,
                AllRoles: []
            }
        },
        mounted: function () {
            this.init();
        },
        methods: {
            init() {
                this.loadUser();
                this.loadAllRoles();
            },
            loadUser() {
                this.$http.get("/listUser", {
                    params: {
                        start: this.currentPage
                    }
                }).then((res) => {
                    if (res.data.code == 0) {
                        this.users = res.data.data
                        this.users.list.forEach((x) => {
                            x.status = false;
                        })
                    }
                })
            },
            handleCurrentChange() {
                this.loadUser()
            },
            handleEdit(index, row) {
                console.log(index, row);
                row.status = false;
                this.$set(this.users, index, row)
            },
            loadAllRoles() {
                this.$http.get("/permission/listRole").then((res) => {
                    this.AllRoles = res.data.data
                })
            }
            ,
            novelDelete(row) {
                this.$http.post("/deleteUser", row).then((res) => {
                    if (res.data.code == 0) {
                        this.$msg.success(res.data.message + '请刷新页面')
                    } else {
                        this.$msg.fail(res.data.message)
                    }
                })
            },
            edit(index, row) {
                this.temp = JSON.parse(JSON.stringify(row))
                row.status = true;
                this.$set(this.users.list, index, row)
            },
            cancelEdit(index, row) {
                row.status = false;
                this.$set(this.users.list, index, row)
            },
            confirmEdit(index, row) {
                delete this.temp["password"]
                this.$http.post("/updateUser", this.temp)
                const deleteRole = this.temp.roles.concat(row.roles).filter(v => !row.roles.includes(v))
                //权限更改
                //row内的roles是原来的, temp中的roles是修改后的,分别对row.roles和temp.roles取差集得到要增加的和要减少的
                deleteRole.forEach((role) => {
                    if (role) {
                        this.$http.post("/permission/deleteRole", {role: role, uuid: row.uuid})
                    }
                })
                const insertRole = this.temp.roles.concat(row.roles).filter(v => !this.temp.roles.includes(v))
                insertRole.forEach((role) => {
                    if (role) {
                        this.$http.post("/permission/insertRole", {name: row.name, role: role, uuid: row.uuid})
                    }
                })
                row.status = false;
                // row = JSON.parse(JSON.stringify(this.temp))
                // this.$set(this.users.list, index, JSON.parse(JSON.stringify(this.temp)))
                // location.reload();
                setTimeout(function () {
                    location.reload();
                }, 1000)
            },
            roleChange(roles) {
                // this.temp.roles = roles.toString().split(',')
            },
        }
    }
</script>

<style scoped>

</style>